export default function TaskList(props) {
  const { list, onChange } = props;

  function handleChange(id, event) {
    // 1. 获取当前元素是勾选还是取消勾选
    const checked = event.target.checked;
    console.log("checked", checked, id);

    // 2. 调用父组件的 onChange 方法
    onChange(id, checked);
  }

  return (
    <div className="list">
      {list.map((item) => (
        <div key={item.id} className="item">
          <input
            type="checkbox"
            defaultChecked={item.done}
            onChange={(event) => handleChange(item.id, event)}
          />
          <div className="flex1">{item.title}</div>
          <div>
            <button>Edit</button>
            <button>Delete</button>
          </div>
        </div>
      ))}
    </div>
  );
}
